<template>
	<div class="homebody">
		<div class="home">
			<div class="h">
				<img src="../../assets/mobile/img/e8ccfc5f_E917060_ef130796.png" />
				<div class="z">
					<el-input v-model="bookname"></el-input>
					<el-button square @click="findBook()"><i class="el-icon-search"></i></el-button>
				</div>
				<div class="shopcar">
					<el-button class="b" @click="goCar()"><i class="el-icon-shopping-cart-2"></i></el-button>
					<el-button class="p" @click="goOrder()">我的订单</el-button>
				</div>
			</div>
			<div class="hhhh">
				<el-button class="all" @click="gohometype()">全部类型分类</el-button>
				<div class="hhhh2">
					热卖中
				</div>
			</div>
			<div class="bd">
				<div class="type">
					<div v-for="item in typeList">
						<div class="type-1" :id="item.id" @mousemove="gotypebook(item.id)"
							@mouseout="gotypebook2(item.id)" @click="gotypebook3(item.id)">
							{{item.name}}
						</div>
					</div>
				</div>
				<div class="lb">
					<el-carousel :interval="5000" arrow="always">
						<el-carousel-item v-for="item in this.lbList">
							<img :src="`http://127.0.0.1:80/api/public/showimg/${item.picture}`" />
						</el-carousel-item>
					</el-carousel>
				</div>
				<div class="yb">
					<div v-for="item in  this.hotList" style="display: flex; " class="yb-2">
						<img :src="`http://127.0.0.1:80/api/public/showimg/${item.pic}`" />
						<div style="width: 100%;">
							<div class="yb-1">
								{{item.name}}￥{{item.price}}
							</div>

						</div>
						<div class="yb-3">
							<el-button @click="addsp(item.id)">买</el-button>
						</div>
					</div>
				</div>
			</div>
			<div class="st">
				<h3>最新上架</h3>
			</div>
			<div class="st1"></div>
			<div class="sttp">
				<div v-for="item in this.bodyList" class="sttpst">
					<img :src="`http://127.0.0.1:80/api/public/showimg/${item.pic}`" />
					<div style="font-size: 10px;">
						<div@click="ggg(item.id)" >
							{{item.name}}
					</div>
					<div>￥{{item.price}}</div>
				</div>

				<el-button @click="addsp2(item.id)">购买</el-button>
			</div>
		</div>
		<div class="st2"></div>
	</div>
	<router-view></router-view>
	</div>

</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	import Head from './default/pcHead.vue'
	export default {
		name: 'Home',
		components: {
			Head,
		},
		data() {
			return {
				typeList: [],
				lbList: [],
				bodyList: [],
				hotList: [],
				bookname: '',
				book: {},
				arr: []
			}
		},

		methods: {
			gotypebook3(id) {
				this.$router.push({
					query: {
						ids: id
					},
					path: '/hometype'
				})
			},
			ggg(id) {
				console.log(id);

				this.$router.push({
					query: {
						ids: id
					},
					path: '/lookBook'
				})
			},
			findBook() {

				console.log(this.bookname);
				this.book = {
					key: this.bookname
				};
				this.$postkv('/api/public/book/findPageKey/1/3', this.book).then((resp) => {
					console.log('是否拿到参数');
					console.log(resp.data.data.books);
					// this.arr=resp.data.data.books;
					// console.log(this.arr);
					this.$router.push({
						query: {
							arrs: resp.data.data.books
						},
						path: '/hometype'
					})
				})

			},
			gotypebook(id) {
				console.log(id);

				let a = document.getElementById(id);
				a.style.backgroundColor = '#ffe2cd';
				a.style.color = '#ecaf90';
			},
			gotypebook2(id) {
				let a = document.getElementById(id);
				a.style.backgroundColor = 'white';
				a.style.color = 'black';

			},
			goOrder() {
				this.$router.push('/myOrder');
			},
			addsp(id) {
				console.log(id);
				this.$get('/api/public/addCart/' + id).then((resp) => {
					console.log(resp.data.data);
					if (resp.data.data == 0) {
						this.$message.error('当前未登录');
					}
				})
			},
			addsp2(id) {
				console.log(id);
				this.$get('/api/public/addCart/' + id).then((resp) => {
					console.log(resp.data.data);
					if (resp.data.data == 0) {
						this.$message.error('当前未登录');
					}
				})
			},
			gohometype() {
				this.$router.push(`/hometype`);
			},
			goCar() {
				this.$router.push('/pcshopCar');
			}
		},
		computed: {
			...mapState('search', ['user']),

		},
		mounted() {



			this.$axios.get('http://127.0.0.1:80/api/public/type/findAll2').then((resp) => {

				resp.data.data.forEach((item) => {
					if (item.prio < 10000) {
						this.typeList.push(item)
					}
				})
				console.log(this.typeList);
			})
			this.$axios.get('http://127.0.0.1:80/api/public/findHot/1/4').then((resp) => {
				this.lbList = resp.data.data;
				console.log(this.lbList);
			})
			this.$axios.get('http://127.0.0.1:80/api/public/findPageBook/1/10/0').then((resp) => {
				this.bodyList = resp.data.data.books;
				console.log("首页数据" + this.bodyList);
			})
			this.$axios.get('http://127.0.0.1:80/api/public/book/findTopSale/4').then((resp) => {
				this.hotList = resp.data.data;
				console.log(this.hotList);
			})

			console.log(this.user);
		}
	}
</script>

<style>
	.homebody {
		background-color: #f0eff2;
	}

	.type-1 {
		margin-top: 2%;
		height: 45px;
		font-size: 15px;
		line-height: 40px;
	}

	.home {
		width: 65%;
		margin: 0 auto;
		padding-left: 5%;
		padding-top: 1%;
		padding-bottom: 5%;
		padding-right: 5%;
		background-color: #f0eff2;
		border-radius: 10px;
		/* background-color: #0874FE; */
	}

	.home button.all {
		margin-top: 10px;
		width: 20%;
		background-color: #f0eff2;
	}

	.h {
		margin-top: 30px;
		width: 100%;
		display: flex;
	}

	.h img {
		width: 13vw;
		height: 5vw;
	}

	.z {
		margin-left: 5%;
		width: 50%;
		display: flex;
	}

	.z input {
		/* 	width: 50%; */
		/* border: 2px solid red; */
		position: relative;

		top: 30px;
	}

	.z button {
		width: 70px;
		height: 40px;
		position: relative;
		right: 5px;
		top: 30px;
		/* border: none; */


	}

	.shopcar {

		width: 20%;
		/* background-color: #57ADEF; */
		display: flex;
		position: relative;
		left: 5.3%;
	}

	.shopcar button.b {
		background-color: #ff1144;
		border: none;
		color: white;
		width: 100px;
	}

	.shopcar button.p {
		margin-left: 0px;
		border: none;
	}

	.shopcar button {
		margin-top: 22px;
		width: 100px;
		height: 50px;
	}

	.bd {
		margin-top: 5px;
		width: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
		background-color: #f0eff2;
	}

	.type {
		width: 19%;
		height: 300px;
		background-color: white;
		text-align: center;
		border-radius: 10px;
		margin-top: 1%;
	}

	.type button.all2 {
		width: 77%;
		border: none;
		background-color: white;
		margin-top: 4%;
	}

	.type p {
		text-align: center;
	}

	.lb {
		width: 55%;
		height: 300px;
		border: 1px solid black;

	}

	.lb img {
		width: 100%;
		height: 100%;
	}

	.st {
		margin-top: 30px;
		width: 20%;
		background-color: orangered;
		color: white;
		text-align: center;

	}

	.st1 {
		width: 100%;
		height: 2px;
		margin-top: 1px;
		background-color: orange;
	}

	.st2 {
		width: 100%;
		height: 2px;
		margin-top: 40px;
		background-color: orange;
	}

	.sttp {
		width: 100%;
		display: flex;
		margin: 0 auto;
		flex-wrap: wrap;
		background-color: #f0eff2;
	}

	.sttpst img {
		border-radius: 10px;
		width: 9.8vw;
		height: 12vw;
	}

	.sttp h5 {
		text-align: center;
	}

	.sttp button {
		border: none;
	}

	.sttpst {
		width: 18%;
		height: 300px;
		margin: 0 auto;
		margin-top: 3%;
		text-align: center;
		background-color: white;
		padding-bottom: 1%;
		padding-top: 2%;
		border-radius: 10px;

	}

	.hhhh {
		width: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}


	.hhhh button.all {
		width: 19%;
		border: none;
		background-color: white;
		margin-left: 1%;
	}

	.hhhh2 {
		background-color: #ff1144;
		margin-top: 30px;
		padding-right: 9%;
		background-color: #f0eff2;
	}

	.yb {
		width: 20%;
		background-color: white;
		border-radius: 10px;

	}

	.yb-1 {
		text-align: center;
		font-size: 5px;
		margin-top: 5%;
		margin-left: 5px;
		padding-top: 10%;
	}

	.yb-2 {
		margin: 0 auto;
		margin-top: 5%;

	}

	.yb-3 {
		padding-top: 3%;
	}

	.yb-3 button {
		background-color: white;
		border: none;
	}

	.yb img {
		margin-top: 9px;
		margin-left: 5px;
		width: 4vw;
		height: 2.5vw;
	}
</style>